{% extends "double.html" %}
{% block scripts %}
  <script type="application/javascript" src="{{ STATIC_URL }}js/category.js"></script>
{% endblock %}
{% block title %} home {% endblock %}
{% block navpath %}

  <div class="page-header">
    <h1><small>类别</small></h1>
  </div>
{% endblock %}
{% block main %}
  <div class="col-xs-12 col-sm-6 col-md-12">
    <p class="navbar-text navbar-right">
      <a href="{% url "category-add" %}" type="button" class="btn btn-success">新建</a>
      <a href="" type="button" class="btn btn-info">管理</a>
    </p>
  </div>

  {% for category in categories %}
  <div class="col-xs-12 col-sm-6 col-md-6">
    <div class="well">
      <a href="{{ category.get_absolute_url }}">
        <img src="http://static.bootcss.com/www/assets/img/codeguide.png" class="img-responsive img-thumbnail" alt="Responsive image">
      </a>
      <div class="well-sm">
        <a href="{{ category.get_absolute_url }}">
          <h4 class="text-muted bg-info">{{ category.name }} <em>{{ category.contact_set.all.count }}</em></h4>
        </a>
      </div>
    </div>
  </div>
  {% endfor %}
  <div class="col-xs-12 col-sm-6 col-md-8">
    {% if is_paginated %}
    <div class="col-xs-12 col-sm-6 col-md-10">
      <ul class="pagination pagination-centered">
        {% if page_obj.has_previous %}
          <li><a href="?page=1"><<</a></li>
          <li><a href="?page={{ page_obj.previous_page_number }}"><</a></li>
        {% endif %}

        {% for i in paginator.page_range %}
          <li {% if page_obj.number == i %} class="active" {% endif %}><a href="?page={{i}}">{{i}}</a></li>
        {% endfor %}

        {% if page_obj.has_next %}
          <li><a href="?page={{ page_obj.next_page_number }}">></a></li>
          <li><a href="?page={{ page_obj.paginator.num_pages }}">>></a></li>
        {% endif %}
      </ul>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
      <form action="." method="get" id="paginate-by-form">
        <select name="paginate_by" class="form-control" id="paginate-by">
          <option>10</option>
          <option>20</option>
          <option>30</option>
        </select>
      </form>
    </div>
    {% endif %}
  </div>
{% endblock %}

{% block aside %}
aside
{% endblock %}